import React, { PureComponent } from 'react'
import OrderTable from '../component/order/table'
import Mask from '../component/mask/mask'
import Flow from '../component/order/flow'
import FlowDetail from '../component/order/flow-detail'
import '../../css/order.scss'
class Pay extends PureComponent {

    constructor () {
        super()
        this.state = {
            mask: false,
            content: ''
        }

        this.detail = false
    }

    hideMask = () => {
        if (this.detail) {
            this.detail = false
            this.openFlow()
        } else {
            //clear
            this.detail = false
            this.setState({
                mask: false
            })
        }

    }

    openFlow = (value = this.value) => {
        this.value = value
        this.setState({
            mask: true, content: <Flow data={value} clickToDetail={this.openFlowDetail}/>
        })
    }

    openFlowDetail = () => {
        this.detail = true
        this.setState({
            mask: true, content: <FlowDetail/>
        })
    }

    render () {
        return (
            <div>
                <div className="full-container">
                    <Mask show={this.state.mask} hideMask={this.hideMask}>
                        {this.state.content}
                    </Mask>
                    <div className="order-table">
                        <OrderTable clickToDetail={this.openFlow}/>
                    </div>
                </div>
            </div>
        )
    }

}

export default Pay